<template>
  <view>
    <view class="btn-list options">
      <button :type="wuxing == item.val ? 'primary' : 'default'" v-for="item in wuxingItems" :value="item.val"
        :key="item.val" @click="get(item.val)">
        {{ item.name }}
      </button>
      <button type="default" @click="exportJs">导出</button>
    </view>
    <view class="content">
      <ul class="wordsUl btn-list">
        <li class="wordsList" v-for="(item, key) in allResultItems" :key="key" style="width: 100%">
          <p style="margin: 10px 0">笔画{{ key }}:</p>

          <span style="user-select: text; margin-right: 5px" v-for="(ele, index) in item" :key="ele.zi"
            :class="ele.shengpi ? 'shengpi' : ''" @click="upedate(key, index, ele.zi)" :data-value="encodeURI(ele.zi)">
            {{ ele.zi }}
          </span>
        </li>
      </ul>
    </view>
  </view>
</template>

<script setup>
import {  ref,reactive,getCurrentInstance } from 'vue';

let { proxy } = getCurrentInstance()
let wuxing = ref('')
let wuxingItems = [
  { val: 'Jin', name: '金' },
  { val: 'Mu', name: '木' },
  { val: 'Shui', name: '水' },
  { val: 'Huo', name: '火' },
  { val: 'Tu', name: '土' },
]
let allResultItems = ref({})
let whichWx = null


function get(wx) {
  wuxing = wx

  
  let result= proxy.$allWords['words'+wuxing]
  whichWx = result
  console.log(result);
  let arr = Object.values(result)
  let bihuaMap = {}
  let allMap = {}
  for (let i = 0; i < arr.length; i++) {
    if (allMap[arr[i].fbihua]) {
      allMap[arr[i].fbihua].push(arr[i])

    } else {
      allMap[arr[i].fbihua] = [arr[i]]
    }
  }
  console.log(allMap)
  
  allResultItems.value = allMap
}
function upedate(index, ziIndex, zi) {
  // console.log(this.allResultItems[index][ziIndex].shengpi)
  // console.log(this.whichWx[zi])
  allResultItems.value[index][ziIndex].shengpi = !allResultItems.value[index][ziIndex].shengpi
  let className = document.querySelector(`[data-value="${encodeURI(zi)}"]`).className
  if (className.indexOf('shengpi') > -1) {
    document.querySelector(`[data-value="${encodeURI(zi)}"]`).className = ''
  } else {
    document.querySelector(`[data-value="${encodeURI(zi)}"]`).className = 'shengpi'
  }
  // console.log(this.whichWx[zi].shengpi)
}
function exportJs() {
  // console.log(proxy.$allWords.wordsJin)
  // console.log(proxy.$allWords.wordsMu)
  // console.log(proxy.$allWords.wordsShui)
  // console.log(proxy.$allWords.wordsHuo)
  // console.log(proxy.$allWords.wordsTu)
  put('wordsJin')
  put('wordsMu')
  put('wordsShui')
  put('wordsHuo')
  put('wordsTu')
}
function put(name) {
  // console.log(name);
  // return
  let words = 'const ' + name + ' = ' + JSON.stringify(proxy.$allWords[name], null, 2) + '\n export default ' + name
  
  
  const blobContent = new Blob(
    [words],
    { type: 'application/json' }
  );

  const blobUrl = window.URL.createObjectURL(blobContent)

  downloadFileByBlob(blobUrl, name + '.js')
}




function downloadFileByBlob(blobUrl, filename) {
  const eleLink = document.createElement('a')
  eleLink.download = filename
  eleLink.style.display = 'none'
  eleLink.href = blobUrl
  // 触发点击
  // document.body.appendChild(eleLink)
  eleLink.click()
  // 然后移除
  // document.body.removeChild(eleLink)
}
</script>

<style>
.content {
  padding-bottom: 30px;
}

.options {
  display: flex;
  margin: 10px 0;
}

.wordsUl {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.title {
  font-weight: bold;
  text-align: center;
  padding: 20px 0px;
  font-size: 20px;
}

.tips {
  color: #999999;
  font-size: 14px;
  padding: 20px 30px;
}

.btn-list {
  padding: 0px 30px;
}

.btn-list button {
  margin-bottom: 20px;
}

.upload-preview {
  width: 100%;
}

.wordsList span {
  padding: 5px;
  border-radius: 5px;
  display: inline-block;
}

.wordsList span.shengpi {
  background-color: #10aeff;
}
</style>
